<template>
    <view class="p-5">
        <u-form :model="teacher" :border-bottom="true">
            <u-form-item label="姓名"><u-input v-model="teacher.name" /></u-form-item>
            <u-form-item label="昵称"><u-input v-model="teacher.nickname" /></u-form-item>
            <u-form-item label="手机"><u-input v-model="teacher.phone" type="number" /></u-form-item>
            <u-form-item label="生日">
                <u-input v-model="teacher.birthday" type="date" disabled />
                <u-button size="mini" icon="" @click="showCalendar = true">选择</u-button>
                <u-calendar v-model="showCalendar" mode="date" endDate="today" @change="(res) => { teacher.birthday = res.result }" />
            </u-form-item>
            <u-form-item label="性别">
                <u-radio-group v-model="teacher.sex">
                    <u-radio name="男" label="男">男</u-radio>
                    <u-radio name="女" label="女">女</u-radio>
                </u-radio-group>
            </u-form-item>
            <!-- <u-form-item label="头像"><u-upload></u-upload></u-form-item> -->
            <u-form-item><u-button type="primary" @click="submit">提交</u-button></u-form-item>
        </u-form>
        <u-button class="mt-10" @click="logOut">退出登录</u-button>
    </view>
</template>
<script lang="ts" setup>
    import { ref, onMounted } from 'vue'
    import { http } from '@/utils/http'
    import { useUserStore } from '@/store'
    
    const userStore = useUserStore()

    const teacher = ref({
        name: '',
        nickname: '',
        phone: '',
        birthday: '',
        sex: ''
    })

    // 日历组件是否显示
    const showCalendar = ref(false)

    // 获取老师信息
    onMounted(() => {
        http.get('/api-mini/teacher/info').then(res => {
            teacher.value = res.data
        })
    })
    function submit() {
        console.log(teacher.value)
        http.post('/api-mini/teacher/edit', teacher.value).then(res => {
            uni.showToast({ title: '修改成功', icon: 'success' })
            setTimeout(() => {
                uni.navigateBack()
            }, 1000)
        })
    }

    function logOut() {
        uni.showModal({ 
            title: '提示',
            content: '确定退出登录吗？', 
            success: (res) => { 
                if (res.confirm) {
                    userStore.logOut()
                } 
            } 
        })
    }
</script>